<template>
  <div style="width: 950px;margin: 0 auto">
    <el-card v-for="m in movie">
      <div>
        <a href="" style="text-decoration: none">
          <el-row>
            <el-col :span="4">
              <img :src= m.imgUrl style="width: 75%">
            </el-col>
            <el-col :span="20">
              <p>{{m.title}}</p>
              <p style="font-size: 15px;color: #666">
                导演: {{m.director}} 主演: {{m.star}} /{{m.country}}/{{m.area}}/{{m.score}}分({{m.numberOfComments}}评价)
              </p>
            </el-col>
          </el-row>
        </a>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <h1 style="color: #336688">影评内容页面</h1>
      <el-form label-width="80px">
        <el-form-item label="影评标题">
          <el-input placeholder="请输入影评标题" v-model="c.title"></el-input>
        </el-form-item>
        <!--   星选框   -->
        <el-form-item>
          <div class="demo-rate-block">
            <span class="demonstration">给个评价吧:<el-rate v-model="value1"/></span>
          </div>
        </el-form-item>

        <el-form-item label="图片">
          <!--   上传组件开始   -->
          <el-upload
              v-model:file-list="fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image"/>
          </el-dialog>
          <!--   上传组件结束   -->
        </el-form-item>
        <el-form-item label="正文内容">
          <!--   装富文本编辑器的元素   -->
          <div ref="editorContent">

          </div>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary">发布影评</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
//导入富文本编辑器
import Editor from 'wangeditor';


const movie = ref([
  {
    "imgUrl":"imgs/img.png",
    "title":"坚如磐石",
    "director":"张艺谋",
    "star":"张译 / 于和伟",
    "country":"中国大陆",
    "area":"中国香港",
    "score":"7.4",
    "numberOfComments":"760076"
  }
])


//得到页面中用来装编辑器的div
const editorContent = ref(null);
//在Vue实例挂载时初始化富文本编辑器
const value1 = ref(null)

onMounted(() => {
  //创建富文本编辑器的实例
  let editor = new Editor(editorContent.value);
  //设置占位文本
  editor.config.placeholder = "请输入内容详情...";
  //将富文本编辑器渲染到页面中
  editor.create();
})
//和页面元素绑定的内容对象
const c = ref({title: "", type: "1", categoryId: ""})

/*上传相关开始*/
const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
</script>

<style scoped>
.demo-rate-block {
  text-align: left;
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: inline-block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 15px;
}
</style>